<template>
  <div class="register-container">
    <!-- 动态背景 -->
    <dynamic-background type="register" :overlay-opacity="0.8" />
    
    <transition name="fade-in" appear>
      <div class="register-box">
        <!-- 装饰图案 -->
        <div class="decoration-shapes">
          <div class="shape shape-1"></div>
          <div class="shape shape-2"></div>
          <div class="shape shape-3"></div>
          <div class="shape shape-4"></div>
        </div>
        <div class="decoration-lines">
          <div class="line-group line-group-1"></div>
          <div class="line-group line-group-2"></div>
        </div>
        
        <div class="register-left">
          <div class="logo-header">
            <img src="../images/logo-圆角.png" alt="small-logo" class="small-logo" />
            <span class="logo-text">云栈智慧管家</span>
          </div>
          <div class="animation-container">
            <register-animation />
          </div>
          <p class="slogan-text">让我们一起开启新零售时代</p>
        </div>
        <div class="register-right">
          <div class="welcome-text">
            <h2>👋 欢迎加入！</h2>
          </div>
          <el-form :model="form" :rules="rules" ref="form" class="register-form">
            <el-form-item prop="username">
              <el-input 
                v-model="form.username" 
                placeholder="请输入用户名"
                prefix-icon="el-icon-user">
              </el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input 
                v-model="form.email" 
                placeholder="请输入电子邮箱"
                prefix-icon="el-icon-message">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input 
                v-model="form.password" 
                type="password" 
                placeholder="请输入密码"
                prefix-icon="el-icon-lock">
              </el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input 
                v-model="form.confirmPassword" 
                type="password" 
                placeholder="请确认密码"
                prefix-icon="el-icon-lock">
              </el-input>
            </el-form-item>
            <el-button type="primary" class="register-button" @click="handleSubmit">注册</el-button>
            <div class="login-container">
              <el-button type="text" class="login-btn" @click="goToLogin">已有账号？立即登录</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { register } from '@/api/auth'
import DynamicBackground from '@/components/DynamicBackground.vue'
import RegisterAnimation from '@/components/RegisterAnimation.vue'

export default {
  name: 'RegisterView',
  components: {
    DynamicBackground,
    RegisterAnimation
  },
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    async handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return false
        }
        
        try {
          // 创建一个新对象，不包含confirmPassword字段
          const registerData = {
            username: this.form.username,
            email: this.form.email,
            password: this.form.password
          }
          
          const res = await register(registerData)
          
          // 检查后端返回的code字段
          if (res.code === 200) {
            this.$message({
              message: res.message || '注册成功',
              type: 'success',
              duration: 5000
            })
            this.$router.push('/user/login')
          } else {
            // 错误消息已经在request.js中处理
            // 如果是用户名已存在错误，聚焦到用户名输入框
            if (res.code === 401) {
              this.$nextTick(() => {
                this.$refs.form.fields.find(field => field.prop === 'username').focus()
              })
            }
          }
        } catch (error) {
          console.error('注册失败:', error)
          // 错误消息已经在request.js中处理
        }
      })
    },
    goToLogin() {
      // 添加页面离开动画
      document.querySelector('.register-box').classList.add('slide-out-right')
      
      // 延迟导航以等待动画完成
      setTimeout(() => {
        this.$router.push('/user/login')
      }, 500)
    }
  }
};
</script>

<style scoped>
.register-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 移除旧的背景图 */
  /* background: url('../images/background.png') center center / cover no-repeat; */
  position: relative;
  overflow: hidden;
}

/* 添加进入动画 */
.fade-in-enter-active {
  transition: all 0.8s ease;
}

.fade-in-enter {
  opacity: 0;
  transform: translateY(20px);
}

/* 添加页面切换动画 */
.slide-out-right {
  animation: slideOutRight 0.5s forwards;
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(50px);
    opacity: 0;
  }
}

.register-box {
  width: 900px;
  height: 500px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 1;
  /* 添加玻璃效果 */
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 装饰图案样式 */
.decoration-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.shape {
  position: absolute;
  opacity: 0.1;
}

.shape-1 {
  width: 120px;
  height: 120px;
  background: #304156;
  top: -30px;
  left: 60%;
  transform: rotate(45deg);
  border-radius: 30px;
}

.shape-2 {
  width: 80px;
  height: 80px;
  background: #3d5173;
  bottom: 50px;
  left: 70%;
  transform: rotate(30deg);
  border-radius: 20px;
}

.shape-3 {
  width: 60px;
  height: 60px;
  background: #4a6290;
  top: 100px;
  left: 75%;
  transform: rotate(60deg);
  border-radius: 15px;
  opacity: 0.07;
}

.shape-4 {
  width: 40px;
  height: 40px;
  background: #5773ad;
  bottom: 150px;
  left: 65%;
  transform: rotate(15deg);
  border-radius: 10px;
  opacity: 0.05;
}

.decoration-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.line-group {
  position: absolute;
  opacity: 0.1;
}

.line-group-1 {
  width: 200px;
  height: 200px;
  top: 40px;
  left: 65%;
  background-image: repeating-linear-gradient(0deg, #304156, #304156 1px, transparent 1px, transparent 10px);
  transform: rotate(45deg);
}

.line-group-2 {
  width: 150px;
  height: 150px;
  bottom: 40px;
  left: 60%;
  background-image: repeating-linear-gradient(90deg, #304156, #304156 1px, transparent 1px, transparent 10px);
  transform: rotate(-30deg);
}

/* 增强左侧面板样式 */
.register-left {
  width: 40%;
  background: linear-gradient(135deg, #304156 0%, #263445 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  position: relative;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
  
  .animation-container {
    width: 100%;
    height: 240px;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
  }
}

.logo-header {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.small-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.logo-text {
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
}

.slogan-text {
  color: #fff;
  font-size: 16px;
  margin-top: 20px;
  text-align: center;
}

.register-right {
  width: 60%;
  padding: 40px 60px;
}

.welcome-text {
  margin-bottom: 30px;
  text-align: left;
}

.welcome-text h2 {
  font-size: 28px;
  color: #304156;
  margin-bottom: 10px;
}

.register-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input /deep/ .el-input__inner {
  height: 50px;
  border-radius: 25px;
  padding-left: 45px;
  border-color: #dcdfe6;
}

.el-input /deep/ .el-input__inner:hover {
  border-color: #ff6b00;
}

.el-input /deep/ .el-input__inner:focus {
  border-color: #ff6b00;
}

.el-input /deep/ .el-input__prefix {
  left: 20px;
}

.register-button {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background: #ff6b00;
  border-color: #ff6b00;
  font-size: 16px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.register-button:hover,
.register-button:focus {
  background: #ff8533;
  border-color: #ff8533;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
}

.register-button:active {
  background: #e65d00;
  border-color: #e65d00;
  color: #fff;
  transform: translateY(0);
}

.login-container {
  text-align: center;
}

.login-btn {
  color: #ff6b00;
  font-size: 14px;
}

.login-btn:hover,
.login-btn:focus {
  color: #ff8533;
  text-decoration: none;
  background: transparent;
}

.login-btn:active {
  color: #e65d00;
  text-decoration: none;
  background: transparent;
}
</style> 